<template>
  <div>
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="生产部门">
        <el-select
          v-model="searchModel.searchItem.people_management_edpartment_id"
          placeholder="生产部门"
        >
          <el-option label="全部部门" value=""></el-option>
          <el-option
            v-for="item in getdropele"
            :key="item.dep_id"
            :label="item.dep_name"
            :value="item.dep_id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="用户">
        <el-input
          v-model="searchModel.searchItem.people_management_name"
          placeholder="用户名称"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-select
          v-model="searchModel.searchItem.people_management_status"
          placeholder="状态"
        >
          <el-option label="全部" value=""></el-option>
          <el-option label="在职" value="0"></el-option>
          <el-option label="离职" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="peoplePageIndex">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="adddelog = true">添加</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="peopleArrsDel">删除</el-button>
      </el-form-item>
    </el-form>

    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="people_management_id" label="编号" width="120">
      </el-table-column>
      <el-table-column
        prop="people_management_loginname"
        label="登录名"
        width="120"
      >
      </el-table-column>
      <el-table-column prop="people_management_name" label="姓名" width="120">
      </el-table-column>
      <el-table-column
        prop="people_management_dataofbirth"
        label="出生日期"
        width="120"
      >
      </el-table-column>
      <el-table-column label="性别" width="120">
        <template slot-scope="scope">{{
          scope.row.people_management_sex
        }}</template>
      </el-table-column>
      <el-table-column
        prop="people_management_department_id"
        label="部门名称"
        width="120"
      >
      </el-table-column>
      <el-table-column
        prop="people_management_major_id"
        label="专业"
        width="120"
      >
      </el-table-column>
      <el-table-column
        prop="people_management_role_id"
        label="角色"
        width="120"
      >
      </el-table-column>
      <el-table-column
        prop="people_management_phonenumber"
        label="联系电话"
        width="120"
      >
      </el-table-column>
      <el-table-column prop="people_management_phone" label="手机" width="120">
      </el-table-column>
      <el-table-column
        prop="people_management_position"
        label="职位"
        width="120"
      >
      </el-table-column>
      <el-table-column
        prop="people_management_headportrait"
        label="头像"
        width="120"
      >
      </el-table-column>
      <el-table-column
        prop="people_management_managerial_position_id"
        label="管理职位"
        width="120"
      >
      </el-table-column>
      <el-table-column
        prop="people_management_technology_position_id"
        label="技术职位"
        width="120"
      >
      </el-table-column>
      <el-table-column prop="people_management_status" label="状态" width="120">
      </el-table-column>
      <el-table-column
        prop="people_management_entry_time"
        label="入职时间"
        width="120"
      >
      </el-table-column>
      <el-table-column
        prop="people_management_resignation_time"
        label="离职时间"
        width="120"
      >
      </el-table-column>
      <el-table-column
        prop="people_management_department_name"
        label="任职部门"
        width="120"
      >
      </el-table-column>
      <el-table-column prop="people_management_order" label="序号" width="120">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="searchModel.pageindex"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="searchModel.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>

    <div v-show="adddelog">
      <span>新增用户</span>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <el-form
            ref="form"
            :model="newlyForm"
            label-width="100px"
            size="mini"
          >
            <el-row>
              <el-col :span="8">
                <el-form-item label="姓名">
                  <el-input
                    v-model="newlyForm.people_management_name"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="登录名">
                  <el-input
                    v-model="newlyForm.people_management_loginname"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="密码">
                  <el-input
                    v-model="newlyForm.people_management_password"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="出生日期">
                  <el-date-picker
                    v-model="newlyForm.people_management_dataofbirth"
                    type="date"
                    :formatter="this.$dateTools.dateFormat"
                    placeholder="选择日期"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="性别">
                  <el-select
                    v-model="newlyForm.people_management_sex"
                    placeholder="请选择活动性别"
                  >
                    <el-option label="男" value="true"></el-option>
                    <el-option label="女" value="false"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="专业">
                  <el-select
                    v-model="newlyForm.people_management_major_id"
                    placeholder="请选择专业"
                  >
                    <el-option label="建筑" value="1"></el-option>
                    <el-option label="结构" value="2"></el-option>
                    <el-option label="暖通" value="3"></el-option>
                    <el-option label="给排水" value="4"></el-option>
                    <el-option label="电器" value="5"></el-option>
                    <el-option label="室内" value="6"></el-option>
                    <el-option label="概预算" value="7"></el-option>
                    <el-option label="人事行踪" value="8"></el-option>
                    <el-option label="人力资源" value="9"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="部门">
                  <el-select
                    v-model="newlyForm.people_management_department_id"
                    placeholder="请选择部门"
                  >
                    <el-option label="全部部门" value=""></el-option>
                    <el-option
                      v-for="item in getdropele"
                      :key="item.dep_id"
                      :label="item.dep_name"
                      :value="item.dep_id"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="角色">
                  <el-select
                    v-model="newlyForm.people_management_role_id"
                    placeholder="请选择角色"
                  >
                    <el-option
                      v-for="item in roleele"
                      :key="item.role_id"
                      :label="item.role_name"
                      :value="item.role_id"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="邮箱">
                  <el-input v-model="people_management_email"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="手机">
                  <el-input
                    v-model="newlyForm.people_management_phone"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="联系电话">
                  <el-input
                    v-model="newlyForm.people_management_phonenumber"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="设计职称">
                  <el-select
                    v-model="newlyForm.people_management_position"
                    placeholder="请选择职称"
                  >
                    <el-option
                      label="国家一级注册建筑师"
                      value="国家一级注册建筑师"
                    ></el-option>
                    <el-option
                      label="国家一级注册结构工程师"
                      value="国家一级注册结构工程师"
                    ></el-option>
                    <el-option
                      label="国家一级注册公共设备工程师"
                      value="国家一级注册公共设备工程师"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="管理职位">
                  <el-select
                    v-model="newlyForm.people_management_managerial_position_id"
                    placeholder="请选择职位"
                  >
                    <el-option label="总经理" value="1"></el-option>
                    <el-option label="常务副经理" value="2"></el-option>
                    <el-option label="副经理" value="3"></el-option>
                    <el-option label="部门经理" value="4"></el-option>
                    <el-option label="财务总监" value="5"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="技术职位">
                  <el-select
                    v-model="newlyForm.people_management_technology_position_id"
                    placeholder="请选择活动区域"
                  >
                    <el-option label="总建筑师" value="1"></el-option>
                    <el-option label="总设计师" value="2"></el-option>
                    <el-option label="室内设计师" value="3"></el-option>
                    <el-option label="室外设计师" value="4"></el-option>
                    <el-option label="自动锁门设计师" value="5"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="职位隶属部门">
                  <el-select
                    v-model="newlyForm.people_management_department_name"
                    placeholder="请选择部门"
                  >
                    <el-option label="全部部门" value=""></el-option>
                    <el-option
                      v-for="item in getdropele"
                      :key="item.dep_id"
                      :label="item.dep_name"
                      :value="item.dep_name"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="在职状态">
                  <el-select
                    v-model="newlyForm.people_management_status"
                    placeholder="请选择活动区域"
                  >
                    <el-option label="在职" value="0"></el-option>
                    <el-option label="离职" value="1"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="入职时间">
                  <el-date-picker
                    v-model="newlyForm.people_management_entry_time"
                    type="date"
                    :formatter="this.$dateTools.dateFormat"
                    placeholder="选择日期"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="上传头像">
                  <el-upload
                    class="avatar-uploader"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload"
                  >
                    <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="离职时间">
                  <el-date-picker
                    v-model="newlyForm.people_management_resignation_time"
                    type="date"
                    :formatter="this.$dateTools.dateFormat"
                    placeholder="选择日期"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="显示排序">
                  <div class="search">
                    <el-input
                      v-model="newlyForm.people_management_order"
                    ></el-input>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-button size="mini" @click="peoplesubmit" round
                >保存</el-button
              >
              <el-button size="mini" @click="adddelog = false" round
                >取消</el-button
              >
            </el-row>
          </el-form>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import {
  peoplemanagerPage,
  arrsDelete,
  getdropurapi,
  SearchRoleList,
  peopleaddapi,
} from "./PersonnelManagerApi";

export default {
  data() {
    return {
      imageUrl: "",

      formInline: {
        user: "",
        region: "",
      },
      tableData: [],
      multipleSelection: [],
      searchModel: {
        pageindex: 1,
        pagesize: 10,
        searchItem: {
          people_management_edpartment_id:null, //部门
          people_management_name: null, //姓名
          people_management_status: null //状态
        },
      },
      total: 0,
      getdropele: [], //部门
      roleele: [], //角色
      searchModelrole: {
        searchItem: {},
        pageIndex: 1,
        pageSize: 100,
      },
      newlyForm: {
        //添加东西
        people_management_loginname: "", //登录名
        people_management_name: "", //姓名
        people_management_password: "", //密码
        people_management_dataofbirth: null, //出生日期
        people_management_sex: null, //性别
        people_management_department_id: "", //部门名称
        people_management_major_id: "", //专业
        people_management_role_id: "", //角色
        people_management_phonenumber: "", //联系电话
        people_management_phone: "", //手机
        people_management_position: "", //职位
        people_management_headportrait: "", //头像
        people_management_managerial_position_id: "", //管理职位
        people_management_technology_position_id: "", //技术职位
        people_management_status: "", //状态
        people_management_entry_time: null, //入职时间
        people_management_resignation_time: null, //离职时间
        people_management_department_name: "", //任职部门
        people_management_order: "", //序号
      },
      people_management_email: "", //邮箱
      adddelog: false, //添加页面是否显示
    };
  },
  created() {
    this.peoplePageIndex();
    this.getdropment();
    this.getroledrop();
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleSizeChange(val) {
      //每页多少条
      this.searchModel.pagesize = val;
      this.peoplePageIndex();
    },
    handleCurrentChange(val) {
      //当前多少页
      this.searchModel.pageindex = val;
      this.peoplePageIndex();
    },
    peoplePageIndex() {
      // this.searchModel.searchItem0.people_management_edpartment_id = this.searchModel.searchItem0.people_management_edpartment_id.toString();
      peoplemanagerPage(this.searchModel).then((r) => {
        this.tableData = r.data.data;
        this.total = r.data.total;
      });
    },
    peopleArrsDel() {
      var arrs = this.$refs.multipleTable.selection;

      var arr = [];
      arrs.forEach((r) => {
        arr.push(r.people_management_id);
      });
      if (arr.length < 1) {
        this.$message("请至少选择一个");
        return;
      }
      if (confirm("确认删除这些数据吗？")) {
        arrsDelete(arr.toString()).then((r) => {
          if (r.data) {
            this.$message("删除成功");
            this.peoplePageIndex();
          } else {
            this.$message("删除失败，暗夜不自带杂烩石");
          }
        });
      }
    },
    handleAvatarSuccess(res, file) {
      //上传头像
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      //图片
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    getdropment() {
      //绑定下拉
      getdropurapi().then((r) => {
        console.log(r);
        this.getdropele = r.data;
      });
    },
    peoplesubmit() {
      //添加方法

      this.newlyForm.people_management_department_id = parseInt(
        this.newlyForm.people_management_department_id
      );
      this.newlyForm.people_management_major_id = parseInt(
        this.newlyForm.people_management_major_id
      );
      this.newlyForm.people_management_role_id = parseInt(
        this.newlyForm.people_management_role_id
      );
      this.newlyForm.people_management_managerial_position_id = parseInt(
        this.newlyForm.people_management_managerial_position_id
      );
      this.newlyForm.people_management_technology_position_id = parseInt(
        this.newlyForm.people_management_technology_position_id
      );
      this.newlyForm.people_management_status = parseInt(
        this.newlyForm.people_management_status
      );
      this.newlyForm.people_management_order = parseInt(
        this.newlyForm.people_management_order
      );
      this.newlyForm.people_management_sex = true;

      console.log(this.newlyForm);
      peopleaddapi(this.newlyForm).then((r) => {
        if (r.data) {
          this.$message("添加成功");
          this.peoplePageIndex();
        } else {
          this.$message("添加失败");
        }
      });
    },
    getroledrop() {
      //角色绑定
      SearchRoleList(this.searchModelrole).then((r) => {
        this.roleele = r.data.data;
      });
    },
    gerttime(val) {
      console.log("???", val); //this.$dateTools.dateFormat
      console.log(this.$dateTools(val).dateFormat);
    },
  },
};
</script>

<style>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 1500px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
</style>